<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>文字流光效果</title>
    <link rel="stylesheet" href="style.css" />
  </head>
  <body>
    <div class="app">
      <p class="text71">文字流光效果</p>
    </div>

    <!-- 
      1、定义文字基本样式，利用 linear-gradient 属性绘制一个渐变背景，并且定义 background-position 的 X 轴，通过 X 轴数值移动渐变背景，让其移动到文字标题开头位置。
      2、通过 -webkit-background-clip: text; 定义背景剪切为文字内容，添加 animation 动画属性，让其循环播放。
      3、给动画定义关键帧，通过变化 background-position 的 X 轴的值，让渐变背景从文字内容开头移动到其结尾，循环起来后就实现了文字流光的视觉效果。
    -->
  </body>
</html>
